<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
<head th:include="admin/common/resource ::commonHead('添加Banner')" ></head>
<div  th:include="admin/common/resource ::uploaderJs"  ></div>
<style>
    .layui-form-item .layui-input-inline{
        margin-left: 30px;
    }
    .layui-form-item .layui-form-label{
        padding: 2px 0px;
    }
    #file{
        position: relative;
    }
    #fileSelect{
        position: absolute;
        height: 38px;
        width: 120px;
        left: 0px;
        opacity: 0;
    }
</style>
<script>
    function loadPage(url) {
        window.location.href = url;
    }
</script>
<head>
    <title>添加</title>
</head>

<body>

<div class="container" style="margin-left: 0px">
    <div class="toolbar btn-group-sm" banner="toolbar" >
        <h6 style="margin-top: 10px;margin-bottom: 20px" > 后台管理系统 / 系统管理 / 编辑Banner </h6>
        <div class="btn-group btn-group-toggle" data-toggle="buttons" style="margin-bottom: 16px">
            <label shiro:hasPermission="banner:list" class="btn btn-secondary btn-sm" onclick="loadPage('/admin/banner/list')">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Banner列表
            </label>

            <label class="btn btn-secondary btn-sm active">
                <input type="radio" name="options" id="option3" autocomplete="off"> 编辑Banner
            </label>
        </div>
    </div>

    <form class="layui-form" action="/admin/banner/save" method="post" enctype="multipart/form-data">
        <input type="hidden" name="id" th:value="${banner.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" th:value="${banner.name}" required  lay-verify="required" placeholder="请输入Banner名称"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">位置选择</label>
            <div class="layui-input-block">
                <input type="radio" name="position" value="1" title="首页轮播(通用)" th:checked="${banner.position}==1" >
                <input type="radio" name="position" value="2" title="首页（课程）" th:checked="${banner.position}==2" >
                <input type="radio" name="position" value="3" title="首页（影视）" th:checked="${banner.position}==3">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input th:checked="${banner.status}==1" id="state" type="checkbox" name="state" lay-skin="switch">
            </div>
        </div>

        <div class="layui-form-item" >
            <label for="file">Banner图</label>
            <div class="layui-input-block">
                <div class="layedit-tool-image" id="image" style="margin-bottom: 10px" >
                    <img style="height: 80px" th:if="${banner.url} != null and ${banner.url} != ''" th:src="${imageService+banner.url}" alt="">
                </div>
                <button type="button" class="layui-btn" id="file">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                    <input type="file"  id="fileSelect" >
                </button>
            </div>
            <input id="icon" type="hidden" name="url" th:value="${banner.url}">
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

</body>
<script th:src="@{/layui/layui.all.js}"></script>
<script>

    $("#fileSelect").change(function () {
        var file = $("#fileSelect")[0].files[0];
        console.log(file);
        var delFile = $("#icon").val()
        uploadImageToQN(file,function (res) {
            $("#icon").val(res.key)
            $("#image").html("<image style='height: 80px' src='[[${imageService}]]"+res.key+"' >")
            deleteQiniuFile(delFile);
        },function (next) {
            console.log(next)
        })
    })

    // layui.use('upload', function(){
    //     var upload = layui.upload;
    //
    //     //执行实例
    //     var uploadInst = upload.render({
    //         elem: '#file' //绑定元素
    //         ,url: '/admin/banner/upload' //上传接口
    //         ,done: function(res){
    //             //上传完毕回调
    //             if(res.status == 1){
    //                 $("#icon").val(res.path)
    //                 $("#image").html("<image style='height: 80px' src='[[${imageService}]]/"+res.path+"' >")
    //             }else{
    //                 lay.msg("上传失败");
    //             }
    //         }
    //         ,error: function(){
    //             //请求异常回调
    //         }
    //     });
    // });

    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){

            $.ajax({
                url: "/admin/banner/save",
                type:'post',
                contentType:'application/json;charset=UTF-8',
                data:JSON.stringify( {
                    id:data.field.id,
                    name:data.field.name,
                    position:data.field.position,
                    status:data.field.state=='on'?1:0,
                    url:data.field.url
                }),
                success: function (res) {
                    if(res.code == 1){
                        layer.msg("保存成功!",function () {
                            window.location.href="/admin/banner/list";
                        },2000)
                    }
                },
                error:function (err) {
                    layer.msg("保存失败")
                }
            })
            return false;
        });
    });
</script>
</html>